<!--
 * @Description  : 
 * @Author       : zhao
 * @Date         : 2022-07-11 14:38:25
 * @LastEditors  : zhao
 * @LastEditTime : 2023-01-11 17:14:07
-->
<!--
 * @Description: 查询框 + table + 分页
 * @Author: zhao
 * @Date: 2022-06-28 11:16:18
 * @LastEditors: zhao
 * @LastEditTime: 2022-06-28 15:45:53
-->
<!-- table组件 -->
<template>
	<div class="table">
		<div class="acq height_Fill">
			<ztitle :name="title" :back="back" />
			<el-card shadow="never">
				<div style="flex-grow: 1;">
					<div class="acq-search">
						<zsearch :searchType="searchType" />
					</div>
					<div class="acq-function">
						<ztableFunction />
					</div>
					<div class="acq-table">
						<ztable :tableHeader="tableHeader" :tableData="tableData" />
					</div>
				</div>
				<div class="acq-page">
					<zpagination />
				</div>
			</el-card>

		</div>
	</div>
</template>

<script setup lang='ts'>
import { ref, toRefs } from 'vue';
import zsearch from './search.vue';
import ztable from './table.vue';
import zpagination from './pagination.vue';
import ztableFunction from './table_function.vue';
import ztitle from '/@/components/ztitle/index.vue';



const props = defineProps({
	//子组件接收父组件传递过来的值
	searchType: Array,
	tableHeader: Array,
	tableData: Array,
	title: String,
	back: {
		type: Boolean,
		default: false
	}
})


const { searchType, tableHeader, tableData, title } = toRefs(props)
</script>
<style lang='scss' scoped>
.acq {
	padding: 10px 20px 0;
	border: 1px solid #eee;
	background: white;

	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	border-radius: 6px;
	border: 1px solid #ebeef5;

	.acq-search {

		width: 100%;
	}

	.acq-table {}
}

.acq-table {
	// margin: 10px 0;
	// background: white;
	// overflow: hidden;
	// padding: 0 10px;
	// border-radius: 7px;
	// box-shadow: 0 2px 6px 0 rgb(218 218 253 / 65%), 0 2px 6px 0 rgb(206 206 238 / 54%);

	margin: 10px 0;
}

.acq-page {

	padding: 10px;
}

.el-card {
	padding-bottom: 20px;
	border-radius: 0 0 5px 5px;
	border: 1px solid var(--el-color-primary-light-9);
	// border-top: none;
}
</style>